<template>
	<view style="width: 100%; ">
		<NavBar text='注册'/>
		<view style="width: 100%; height: 135rpx;"></view>
	<!-- <uni-nav-bar title="注册信息" background-color="#3e9aff" left-icon="left" color="white" @clickLeft="back" ></uni-nav-bar> -->
	<view style="background-color: #fff;">
				<view style="margin-left: 10px;margin-right: 5px;">
					
					<view style="display: flex;justify-content: space-between;margin-left: 10px;height: 60px;text-align: center;line-height: 60px; border-bottom: 1px solid #d7d7d7;">
					
						<view style="width: 78px;height: 21px;font-size: 16px;display: flex;justify-content: space-between;margin-left: 5px;">
							<span>头</span>
							<span>像</span>
						</view>
					
					<view style="display: flex;justify-content: center;margin-top: 10px;">
							<image src="@/static/images/u108.png" style="width: 120rpx;height: 100rpx;" mode=""></image>
							<u-icon name="arrow-right" color="#d6d6d9" size="28"></u-icon>
					</view>
				</view>
				<view style="margin-left: 10px;height: 60px;text-align: center;line-height: 60px; border-bottom: 1px solid #d7d7d7;">
					
						<view style="width: 78px;height: 21px;font-size: 16px;margin-left: 5px;">
							<span style="color: red;">*</span>
							<span>真实姓名</span>
						</view>
						<view>
							<input type="text">
						</view>
				</view>
				<view style="margin-left: 10px;height: 60px;display: flex;justify-content: space-between; text-align: right;line-height: 60px; border-bottom: 1px solid #d7d7d7;">
					
						<view style="width: 78px;height: 21px;font-size: 16px;margin-left: 5px;">
							<span>性别</span>
						</view>
						<view style="margin-top: 15px;">
							<uni-data-checkbox v-model="radio1" :localdata="sex"></uni-data-checkbox>
						</view>
				</view>
				<view style="margin-left: 10px;height: 60px;text-align: center;display: flex;justify-content: space-between; line-height: 60px; border-bottom: 1px solid #d7d7d7;">
					
						<view style="width: 78px;height: 21px;font-size: 16px;margin-left: 5px;">
							<span style="color: red;">*</span>
							<span>联系方式</span>
						</view>
						<view style="font-size: 12px;width: 200px;margin-top: 20px;">
							<input type="number" placeholder="请输入手机号,作为登录使用">
						</view>
						
				</view>
				<view style="margin-left: 10px;height: 60px;display: flex;justify-content: space-between; text-align: right;line-height: 60px; border-bottom: 1px solid #d7d7d7;">
					
						<view style="width: 78px;height: 21px;font-size: 16px;margin-left: 5px;">
							<span>验证码</span>
						</view>
						<view style="
						margin-top: 20px;
						width: 85px;
						height: 20px; 
						text-align: center; 
						border: 1px solid #66cc66; 
						
						border-radius: 5px;" >
							<button @click="startCountdown" :disabled="countdown > 0" style="width: 85px;font-size: 12px; color: #66cc66;height: 20px;line-height: 20px;background-color: white; ">{{ buttonTitle }}</button>
						</view>
				</view>
				<view style="margin-left: 10px;height: 60px;display: flex;justify-content: space-between; text-align: right;line-height: 60px; border-bottom: 1px solid #d7d7d7;">
					
						<view style="width: 78px;height: 21px;font-size: 16px;margin-left: 5px;">
							<span>密码</span>
						</view>
						<view style="width: 220px; display: flex;justify-content: space-between;">
								<view style="margin-top: 20px;"><input class="uni-input" placeholder="6-18位由数字,字母组成" :password="showPassword" /></view>
								<view><uni-icons type="eye-filled" size="20" :style="{ color: !showPassword ? 'blue' : '' }" @click="changePassword"></uni-icons></view>		
						</view>
				</view>
				<view style="margin-left: 10px;height: 60px;display: flex;justify-content: space-between; text-align: right;line-height: 60px; border-bottom: 1px solid #d7d7d7;">
					
						<view style="width: 78px;height: 21px;font-size: 16px;margin-left: 5px;">
							<span>身份证号</span>
						</view>
						<view style="font-size: 12px;width: 200px;margin-top: 20px;">
							<input type="number" placeholder="请输入18位身份证号">
						</view>
				</view>
				<view style="margin-left: 10px;height: 60px;display: flex;justify-content: space-between; text-align: right;line-height: 60px; border-bottom: 1px solid #d7d7d7;">
					
						<view style="width: 78px;height: 21px;font-size: 16px;margin-left: 5px;">
							<span>所属团队</span>
						</view>
						<view style="margin-top: 20px;">
							<u-icon name="arrow-right" color="#d6d6d9" size="28"></u-icon>
						</view>
				</view>
				<view style="margin-left: 10px;height: 60px;display: flex;justify-content: space-between; text-align: right;line-height: 60px; border-bottom: 1px solid #d7d7d7;">
					
						<view style="width: 78px;height: 21px;font-size: 16px;margin-left: 5px;">
							<span>执业级别</span>
						</view>
						<view style="margin-top: 20px;">
							<u-icon name="arrow-right" color="#d6d6d9" size="28"></u-icon>
						</view>
				</view>
				<view style="margin-left: 10px;height: 60px;display: flex;justify-content: space-between; text-align: right;line-height: 60px; border-bottom: 1px solid #d7d7d7;">
					
						<view style="width: 78px;height: 21px;font-size: 16px;margin-left: 5px;">
							<span>执业类型</span>
						</view>
						<view style="margin-top: 20px;">
							<u-icon name="arrow-right" color="#d6d6d9" size="28"></u-icon>
						</view>
				</view>
				<view style="margin-left: 10px;height: 60px;display: flex;justify-content: space-between; text-align: right;line-height: 60px; border-bottom: 1px solid #d7d7d7;">
					
						<view style="width: 78px;height: 21px;font-size: 16px;margin-left: 5px;">
							<span style="color: red;">*</span>
							<span>执业范围</span>
						</view>
						<view style="margin-top: 20px;">
							<u-icon name="arrow-right" color="#d6d6d9" size="28"></u-icon>
						</view>
				</view>
				<view style="margin-left: 10px;height: 60px;display: flex;justify-content: space-between; text-align: right;line-height: 60px; border-bottom: 1px solid #d7d7d7;">
					
						<view style="width: 78px;height: 21px;font-size: 16px;margin-left: 5px;">
							<span style="color: red;">*</span>
							<span>执业机构</span>
						</view>
						<view style="margin-top: 20px;">
							<u-icon name="arrow-right" color="#d6d6d9" size="28"></u-icon>
						</view>
				</view>
				<view style="margin-left: 10px;height: 60px;display: flex;justify-content: space-between; text-align: right;line-height: 60px; border-bottom: 1px solid #d7d7d7;">
					
						<view style="width: 78px;height: 21px;font-size: 16px;margin-left: 5px;">
							<span>职称</span>
						</view>
						<view style="margin-top: 20px;">
							<u-icon name="arrow-right" color="#d6d6d9" size="28"></u-icon>
						</view>
				</view>
				<view style="margin-left: 10px;height: 60px;display: flex;justify-content: space-between; text-align: right;line-height: 60px; border-bottom: 1px solid #d7d7d7;">
					
						<view style="width: 78px;height: 21px;font-size: 16px;margin-left: 5px;">
							<span>毕业院校</span>
						</view>
						<view style="font-size: 12px;width: 200px;margin-top: 20px;">
							<input type="text" >
						</view>
				</view>
				<view style="margin-left: 10px;height: 60px;display: flex;justify-content: space-between; text-align: right;line-height: 60px; border-bottom: 1px solid #d7d7d7;">
					
						<view style="width: 78px;height: 21px;font-size: 16px;margin-left: 5px;">
							<span>邮箱地址</span>
						</view>
						<view style="font-size: 12px;width: 200px;margin-top: 20px;">
							<input type="text" >
						</view>
				</view>
				<view style="margin-left: 10px;height: 60px;display: flex;justify-content: space-between; text-align: right;line-height: 60px; border-bottom: 1px solid #d7d7d7;">
					
						<view style="width: 78px;height: 21px;font-size: 16px;margin-left: 5px;">
							<span>机构地址</span>
						</view>
						<view style="font-size: 12px;width: 200px;margin-top: 20px;">
							<input type="text" >
						</view>
				</view>
				<view style="margin-left: 10px;height: 60px;display: flex;justify-content: space-between; text-align: right;line-height: 60px; border-bottom: 1px solid #d7d7d7;">
					
						<view style="width: 78px;height: 21px;font-size: 16px;margin-left: 5px;">
							<span>执业证书</span>
						</view>
						<view style="font-size: 12px;width: 200px;margin-top: 20px;">
							<input type="text" >
						</view>
				</view>
				
				<view style="margin-left: 10px;height: 60px;display: flex;justify-content: space-between; text-align: right;line-height: 60px; border-bottom: 1px solid #d7d7d7;">
					
						<view style="width: 78px;height: 21px;font-size: 16px;margin-left: 5px;">
							<span>资格证书</span>
						</view>
						<view style="font-size: 12px;width: 200px;margin-top: 20px;">
							<input type="text" >
						</view>
				</view>
				
				<view style="margin-left: 10px;height: 60px;display: flex;justify-content: space-between; text-align: right;line-height: 60px;">
					
						<view style="width: 78px;height: 21px;font-size: 16px;margin-left: 5px;">
							<span>简介</span>
						</view>
						<view style="margin-top: 20px;">
							<u-icon name="arrow-right" color="#d6d6d9" size="28"></u-icon>
						</view>
				</view>
	</view>
	</view>	
	<view>
			<button style="background-color: #ff9900;border-radius: 20px;width: 80%;color: white;">确定</button>
		</view>
	</view>

</template>

<script>
	import NavBar from '@/components/NarBar.vue'
	export default{
		components:{
			NavBar
		},
		data() {
			return {
				countdown:0,
				radio1:0,
				sex: [{
							text: '男',
							value: 0
					}, {
						text: '女',
						value: 1
					}],
				showPassword:true,
			}
		},
		computed:{
			buttonTitle() {
			      if (this.countdown > 0) {
			        return this.countdown + "秒后重试";
			      } else {
			        return "获取验证码";
			      }
			    }
		},
		methods: {
		    startCountdown() {
		      if (this.countdown > 0) {
		        return;
		      }
		      this.countdown = 60;
		      let intervalId = setInterval(() => {
		        this.countdown--;
		        if (this.countdown === 0) {
		          clearInterval(intervalId);
		        }
		      }, 1000);
		      // TODO: 发送验证码的代码
		    },
			changePassword:function(){
				this.showPassword = !this.showPassword
				
			},
			back(){
				uni.navigateBack({ delta: 2 })
			}
		  }
	}
</script>

<style scoped lang="scss">

</style>